<template>
  <div>
    <div class="nav"><h1>用户登入</h1></div>
    <!-- 表单 -->
    <el-form
      ref="form"
      style="width: 400px; margin: auto; margin-top: 30px"
      :model="form"
      :rules="rules"
    >
      <el-form-item prop="name">
        <el-input
          prefix-icon="el-icon-search"
          placeholder="用户名"
          v-model="form.name"
        ></el-input>
      </el-form-item>
      <el-form-item prop="pwd">
        <el-input
          show-password
          prefix-icon="el-icon-search"
          placeholder="密码"
          v-model="form.pwd"
        ></el-input>
      </el-form-item>
      <div class="yzm">
        <el-form-item prop="yzm">
          <el-input
            v-model="form.yzm"
            style="width: 300px"
            prefix-icon="el-icon-search"
            placeholder="请输入验证码"
          ></el-input>
        </el-form-item>
        <div class="yzm1" @click="dianji">{{ acc }}</div>
      </div>
    </el-form>
    <!-- 按钮 -->

    <el-button
      type="primary"
      style="width: 400px; background-color: #2e9688"
      @click="btn"
      >登录</el-button
    >
    <ul>
      <li><input type="checkbox" />记住密码</li>
      <li>
        <p>忘记密码</p>
        &nbsp;
        <p>注册</p>
      </li>
    </ul>
  </div>
</template>

<script>
import httpApi from "../http/index.js";
export default {
  data() {
    let validatePwd = (rule, value, callback) => {
      console.log(value);
      if (value == this.acc) {
      } else {
        callback(new Error("请输入正确的验证码！"));
      }
    };
    let zhanghao = (rule, value, callback) => {
      console.log(value);
      if (value == this.yonghu[0].pwd) {
      } else {
        callback(new Error("请输入正确的密码！"));
      }
    };
    return {
      yonghu: "",
      form: {
        name: "",
        pwd: "",
        yzm: "",
      },
      acc: "",
      rules: {
        name: [{ required: true, message: "请输入用户名称", trigger: "blur" }],
        pwd: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { required: true, validator: zhanghao, trigger: "blur" },
        ],
        yzm: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          { required: true, validator: validatePwd, trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.dianji();
  },
  methods: {
    // 登入
    btn() {
      let params = this.form.name;
      console.log(params);
      httpApi.chaxun.add({ name: params }).then((res) => {
        this.yonghu = res.data.data;
        console.log(this.yonghu);
      });
    },
    dianji() {
      this.acc = "";
      for (let i = 0; i < 4; i++) {
        this.acc += Math.floor(Math.random() * 10);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.nav {
  height: 100px;
  background-color: #2e9688;
  color: whitesmoke;
  line-height: 100px;
}
.yzm {
  display: flex;
  justify-content: space-between;
}
.yzm1 {
  user-select: none;
  line-height: 40px;
  color: whitesmoke;
  height: 40px;
  width: 100%;
  background-color: #2e9688;
}
ul {
  align-items: center;
  padding: 0;
  list-style: none;
  width: 400px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  > li:nth-child(2) {
    display: flex;
  }
}
</style>
